<template>
	<div id="my-info">
		<div class="addWrap">
			<div class="left">
				<p>姓名</p>
				<p>电话号码</p>
				<p>密码</p>
			</div>
			<div class="right">
				<h3>个人信息</h3>
				<p>
					<input type="text" name="username" placeholder="请输入姓名" v-model="name" @focus="focus=1" @blur="focus=0"><br/><em v-show="focus==1||nametips==false">*大于3位的数字</em>
				</p>
				<p>
					<input type="text" name="tel" placeholder="请输入电话号码" v-model="tel" @focus="focus=2" @blur="focus=0"><br/><em v-show="focus==2||teltips==false">*大于3位的数字</em>
				</p>
				<p>
					<input type="password" name="password" placeholder="请输入密码" v-model="psw" @focus="focus=3" @blur="focus=0"><br/><em v-show="focus==3||pswtips==false">*大于3位的数字</em>
				</p>
				<p>
					<button class="button" @click.prevent="change()">保存
						<i v-show="icon" class="process"></i>
						<i v-show="ok" class="ok"></i>
					</button>
					<button class="button btnRight">返回</button>
				</p>	
			</div>			
		</div>
	</div>
</template>

<script>
export default {
	name: "own",
	props:['own'],
	data:function() {
		return {
			name: "",
			tel: "",
			psw: "",
			focus:0,
			nametips:true,
			teltips:true,
			pswtips:true,
			index: "",
			icon:false,
			fail:false,
			ok:false,
		}
	},
	methods:{
		change:function() {
			if(this.ok){this.ok = false};
			this.nametips = (/^\d{3,}$/.test(this.name)) ? true : false;
			this.teltips = (/^\d{3,}$/.test(this.tel)) ? true : false;
			this.pswtips = (/^\d{3,}$/.test(this.psw)) ? true : false;
			if(this.nametips&&this.teltips&&this.pswtips) {
				this.icon = true;
				setTimeout(()=>{
					this.$emit('toChangeOwn',{
						name:this.name,
						tel:this.tel,
						psw:this.psw						
					});
					this.icon = false;
					this.ok = true;
				},1500)
			}else {
				this.fail = true;
			}
		}
	},
}
</script>

<style>
#my-info {margin-top: 200px}
#my-info h3 {font-size: 36px; font-weight: normal;position: absolute;top: -50px;}
#my-info .addWrap {position: relative;}
#my-info .left {text-align: right;display: inline-block;width: 35%;float: left;margin-right:10px;}
#my-info .left>p {height: 30px;margin: 10px 0;line-height: 30px;}
#my-info .right {text-align: left;width: 62%;float: left;position: relative;}
#my-info .right>p {width:220px;margin:10px 0;}
#my-info input {
	width: 100%;
	height: 30px;	
	padding: 0 5px;
	box-sizing: border-box;
}
#my-info .button {
	width: 100px;
	height: 30px;
	background: #3385ff;
	border: none;
	border-radius: 5px;
}
#my-info .btnRight {float: right;}
#my-info em {
	color: #E10601;
	font-size: 12px;
}
</style>